<template>
    <div class="SetPaypassword">
        <div class="row"><input v-model="picCode" type="number" placeholder="图形码"/> <div @click="refreshPicCode" class="btn"><img src="../assets/logo.png" alt=""></div></div>
        <div class="row">
            <input v-model="phone" type="text" placeholder="手机号"/>
            <div v-if="isSending" class="btn unclick">({{time}}s) 后重发</div>
            <div v-else @click="sendMsgCode" class="btn">发送验证码</div>
        </div>
        <div class="row"><input v-model="msgCode" type="number" placeholder="短信验证码"/></div>
        <div class="row"><span class="title">支付密码</span><input v-model="psw" type="number" placeholder="请输入支付密码"/></div>
        <div class="row"><span class="title">确认密码</span><input v-model="pswCopy" type="number" placeholder="再次输入支付密码"/></div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

let __this: any;
@Component({
    // name: 'SetPaypassword'
})
export default class SetPaypassword extends Vue {
    // 图形验证码
    private picCode: number | null = null;
    // 手机号
    private phone: string | null = null;
    // 短信验证码
    private msgCode: number | null = null;
    // 发送中
    private isSending: boolean = false;
    // 剩余时间
    private time: number = 60;
    // 定时器
    private interval: any;
    // 密码
    private psw: number | null = null;
    // 重复密码
    private pswCopy: number | null = null;
    private created(): void {
        __this = this;
    }

    /**
     * 刷新图形码
     */
    private refreshPicCode(): void {}

    /**
     * 发送验证码
     */
    private sendMsgCode(): void {
        if (this.isSending) {return;}
        if (this.picCode === null) {
            this.$common.toast({
                mes: '请输入图形码',
                icon: 'error'
            });
            return;
        }
        if (this.phone === null) {
            this.$common.toast({
                mes: '请输入手机号',
                icon: 'error'
            });
            return;
        }
    //    发送验证码
        this.intervalStart();
    }

    /**
     * 开启定时器
     */
    private intervalStart(): void {
        // let __this = this;
        this.isSending = true;
        this.interval = setInterval(() => {
            __this.time -= 1;
            if (__this.time <= 0) {
                __this.intervalStop();
            }
        }, 1000);
    }

    /**
     * 关闭定时器
     */
    private intervalStop(): void {
        this.isSending = false;
        this.time = 60;
        clearInterval(this.interval);
        this.interval = null;
    }

    /**
     * 重置
     */
    public static reset(): void {
        __this.picCode = null;
        __this.phone = null;
        __this.msgCode = null;
        __this.psw = null;
        __this.pswCopy = null;
        __this.intervalStop();
    }

    /**
     * 获取参数
     */
    public static get params(): any {
        return {
            picCode: __this.picCode,
            phone: __this.phone,
            msgCode: __this.msgCode,
            psw: __this.psw,
            pswCopy: __this.pswCopy
        };
    }
}
</script>

<style scoped lang="less">
.SetPaypassword {
    & .row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        height: 1.0rem;
        margin-bottom: 0.2rem;
        & .btn {
            width: 3.0rem;
            height: 0.8rem;
            background-color: #3B83FF;
            color: white;
            line-height: 0.8rem;
            font-size: 0.28rem;
            & img {
                width: 100%;
                height: 100%;
            }
            border-radius: 0.1rem;
            &:active {
                opacity: 0.8;
            }
        }
        & .unclick {
            background-color: #A6A6A6;
            color: black;
        }
        & input {
            padding: 0.2rem 0.2rem 0.1rem 0.2rem;
            display: inline-block;
            width: 4.0rem;
            margin-right: 0.2rem;
        }
        & .title {
            padding-right: 0.2rem;
        }
    }
}
</style>
